<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					项目id:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					项目名称:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
			</el-row>
		</div>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center'}"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto">
			<el-table-column property="projectId" label="项目id">
			</el-table-column>
			<el-table-column property="addTime" label="创建时间">
			</el-table-column>
			<el-table-column property="name" label="项目名称">
			</el-table-column>
			<el-table-column label="项目状态">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.projectStatus" :active-value="0" :inactive-value="1"
						disabled></el-switch>
				</template>
			</el-table-column>
			<el-table-column property="consume" label="消耗">
			</el-table-column>
			<el-table-column property="conversion" label="转化量">
			</el-table-column>
			<el-table-column property="average" label="平均千次展现费用(元)">
			</el-table-column>
			<el-table-column property="budget" label="项目预算">
			</el-table-column>
			<el-table-column label="查看项目">
				<template slot-scope="scope">
					<template v-for="item in umsAdvertisingUser">
						<span :key="item.id" v-if="item.id==scope.row.userId">
							<el-button type="text"
								@click="openNewPage(item.advertisingId,scope.row.projectId)">查看项目</el-button>
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click="dialogVisibles=true,userId=scope.row.userId,projectId=scope.row.projectId,budget=scope.row.budget">修改项目预算</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="add(scope.row.projectId)">添加广告</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<el-dialog title="修改预算" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose">
			<el-row>
				<el-input v-model="budget"></el-input>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles = false">取 消</el-button>
				<el-button type="primary" @click="updateBudget()">确 定</el-button>
			</span>
		</el-dialog>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import {
		Loading
	} from 'element-ui';
	import qs from 'qs'
	export default {
		name: "qu",
		data() {
			return {
				budget: '',
				userId: '',
				projectId: '',
				dialogVisibles: false,
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				roleDescriptions: {

				},
				state: false,
				size: 10,
				current: 1,
				umsAdvertisingUser: []
			}
		},
		created() {
			let than = this
			this.$axios.post('pmsProject/list', qs.stringify({
				size: this.size,
				current: this.current
			})).then((res) => {
				than.advertisersList = res.data;
				console.log(than.advertisersList)
			})
			this.$axios.post('umsAdvertisingUser/getList').then((res) => {
				than.umsAdvertisingUser = res.data;
				console.log(than.umsAdvertisingUser)
			})
		},
		iskaiqi(state) {
			if (state === 0) {
				return true;
			} else {
				return false
			}
		},
		methods: {
			add(id) {
				let that = this
				let loadingInstance = Loading.service(true);
				for (let i = 0; i < 10; i++) {
					this.$axios.post('pmsProject/addAmsAdvertSing', qs.stringify({
						projectId: id,
						i: i
					})).then((
						res) => {
						if (res.data === true) {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
						} else {
							that.$message.error({
								message: res.data
							});
						}
					});
				}
				loadingInstance.close();

			},
			openNewPage(aid, pid) {
				window.open('https://ad.oceanengine.com/promotion/promote-manage/project?aadvid=' + aid +
					'&searchInput=%2522' +
					pid + '%2522&searchType=8');
			},
			viewAccount(id) {
				this.$router.push({
					name: 'advertisingUser',
					params: {
						accountId: id
					}
				});
			},
			handleSizeChange(val) {
				let current = this.advertisersList.current
				let that = this
				this.$axios.post('pmsProject/list', qs.stringify({
					size: val,
					current: current,
					name: that.aName,
					id: that.aId
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('pmsProject/list', qs.stringify({
					size: that.advertisersList.size,
					current: val,
					name: that.aName,
					id: that.aId
				})).then((res) => {
					that.advertisersList = res.data;
				})
			},
			updateBudget() {
				let that = this;
				this.$axios.post('pmsProject/updateBudget', qs.stringify({
					userId: that.userId,
					projectId: that.projectId,
					budget: that.budget
				})).then((res) => {
					console.log(res)
				})
			},
			selectLike() {
				let that = this
				this.$axios.post('pmsProject/list', qs.stringify({
					size: 10,
					current: 1,
					id: that.aName,
					name: that.aId
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>